<template>
  <!--  传感器信息管理页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.iotCardNumber" clearable placeholder="请输入物联卡号">
        <template slot="prepend">物联卡号</template>
      </el-input>
      <el-input v-model="form.equipSn" clearable placeholder="请输入采集仪SN">
        <template slot="prepend">采集仪SN</template>
      </el-input>
      <el-select v-model="form.bindStatus" filterable clearable placeholder="使用状态">
        <el-option
          v-for="item in bindStatusList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <region-unit v-model="form.areaId" placeholder="物联卡使用区域"></region-unit>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd(false)" class="common_btn-small">单个新增</el-button>
      <el-button icon="el-icon-plus" @click.stop="handleAdd(true)" class="common_btn-small">批量新增</el-button>
      <!-- table -->
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="iotCardNumber" show-overflow-tooltip label="物联卡号" min-width="165"></el-table-column>
        <el-table-column prop="statusName" label="卡状态" width="100">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.status === 0?'background-color: #e43321':'background-color: #0DC26B'"
                    style="color: white;">
              {{scope.row.statusName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="equipSn" min-width="165" label="关联的采集仪"></el-table-column>
        <el-table-column prop="bindTime" label="绑定时间" width="180">
          <template slot-scope="scope">
            {{scope.row.bindTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column prop="regionName" label="使用区域" min-width="165"></el-table-column>
        <el-table-column prop="traffic" label="流量" min-width="140"></el-table-column>
        <el-table-column prop="explanation" label="说明" width="100"></el-table-column>
        <el-table-column prop="operator" label="操作人" width="120"></el-table-column>
        <el-table-column prop="createTime" label="入库时间" width="180">
          <template slot-scope="scope">
            {{scope.row.createTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="220">
          <template slot-scope="scope">
            <el-button class="btn_edit" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button class="btn_add" type="text" @click="handleCopy(scope.row)">复制新增</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="form.total">
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog :title="isBath?'批量新增物联网卡':dialogTitle" :visible.sync="isShowDialog" :close-on-click-modal="false"
               width="520px">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="110px">
        <el-form-item :label="isBath?'开始卡号':'物联卡号'" prop="iotCardNumber">
          <el-input v-model="currentRow.iotCardNumber" placeholder="物联卡号"></el-input>
        </el-form-item>
        <el-form-item v-if="isBath" label="结束卡号" prop="endCardNumber">
          <el-input v-model="currentRow.endCardNumber" placeholder="物联卡号"></el-input>
        </el-form-item>
        <el-form-item label="流量" prop="traffic">
          <el-select v-model="currentRow.traffic" filterable clearable placeholder="请选择流量">
            <el-option
              v-for="item in trafficList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物联卡状态" prop="status">
          <el-select v-model="currentRow.status" filterable clearable placeholder="请选择状态">
            <el-option
              v-for="item in statusList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="explanation">
          <el-input v-model="currentRow.explanation" placeholder="说明"></el-input>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryIotCardList,
  iotCardAdd,
  iotCardUpdate,
} from '@/services/model/sensor'
import RegionUnit from '@/components/region-unit'
import Format from '@/utils/format'
// form表单校验规则
const RULES = {
  iotCardNumber: {
    required: true,
    message: '请输入物联网卡号'
  },
  endCardNumber: {
    required: true,
    message: '请输入物联网卡号'
  }
}
export default {
  components: {RegionUnit},
  data() {
    return {
      rules: RULES,
      tableList: [],
      statusList: [
        {
          name: '正常',
          code: 1,
        },
        {
          name: '异常',
          code: 0,
        }
      ],
      bindStatusList: [
        {
          name: '已使用',
          code: 1,
        },
        {
          name: '未使用',
          code: 0,
        }
      ],
      trafficList: [
        {
          name: '100MB',
          code: '100MB',
        },
        {
          name: '6G',
          code: '6G',
        }
      ],
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      currentRow: {},
      isShowDialog: false,
      isBath: false,
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.currentRow.id ? '编辑物联网卡' : '新增物联网卡'
    },
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      if (timer) {
        return Format(new Date(timer))
      }
      return ''
    },
  },
  methods: {
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    // 表单提交
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitData()
        }
      })
    },
    async submitData() {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? iotCardUpdate : iotCardAdd
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '编辑成功' : '添加成功'
        })
        this.isShowDialog = false
        this.queryList()
      }
    },
    // 新增数据
    handleAdd(isBath) {
      this.currentRow = {}
      this.isBath = isBath
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 新增数据
    handleCopy(row) {
      if (row) {
        //复制新增
        row.id = ''
      }
      this.currentRow = row ? JSON.parse(JSON.stringify(row)) : {}
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    async queryList() {
      let res = await queryIotCardList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)

    },
  },
  mounted() {
    this.queryList()
  },
  activated() {

  }
}
</script>

<style lang="less" scoped>
</style>
